<nz-spin [nzSpinning]="loadingData" style="width: 100%;margin: auto;" [nzTip]="'正在获取数据...'">

  <nz-layout>
    <nz-content>
      <div nz-row>
        <div nz-col [nzSpan]="4" style="padding-left:20px;height: 32px;line-height: 32px;font-weight: bold;">
          已完成实训
          <span style="color:#ef4954;font-size: 18px;">{{finishCount}}</span>次
        </div>
        <div nz-col [nzSpan]="20" style="text-align: right;padding-right:20px;">
          <button nz-button nzType="primary" class="seach-btn" style="margin-right:10px;" [style.background]="searchType==0?'linear-gradient(#96787a, #7c9aaf)':'linear-gradient(#ef4954, #c93c45)'"
            (click)="searchType = 0">全 部</button>
          <button nz-button nzType="primary" class="seach-btn" style="margin-right:10px;" [style.background]="searchType==1?'linear-gradient(#96787a, #7c9aaf)':'linear-gradient(#ef4954, #c93c45)'"
            (click)="searchType = 1">正在进行</button>
          <button nz-button nzType="primary" class="seach-btn" [style.background]="searchType==2?'linear-gradient(#96787a, #7c9aaf)':'linear-gradient(#ef4954, #c93c45)'"
            (click)="searchType = 2">已 结 束</button>
        </div>


      </div>
      <div style="margin: auto;" *ngIf="!loadingData && (!listEntities.entities || listEntities.entities.length==0)">
        <h1 style="margin: 30px; text-align: center; font-weight: bold;font-size: 28px;">没有可以参加的演练</h1>
      </div>
      <div nz-row [nzGutter]="40">
        <div nz-col [nzSpan]="6" *ngFor="let data of listEntities.entities;let i=index;">
          <nz-card [class]="'bg'+getIndex(i)">
            <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 21px;font-weight: bold;">{{ data.subjectName }}</p>
            <ul style="margin-top: 23px;">
              <li style="font-size: 14px;">
                {{(roleType=='2'?'学生：':'教师：')+ data.teacherName}}
              </li>
              <li style="font-size: 14px;">
                创建时间：{{data.creationTime|date:'yyyy-MM-dd'}}
              </li>
              <li style="font-size: 14px;">
                演练状态：
                <span>{{data.drillStatus===0? '未开始':data.drillStatus===1?'正在演练':'已完成'}}</span>
              </li>
              <li style="font-size: 14px;">
                演练类型：{{data.drillSubjectType==1?'流程内容演练':(data.drillType===0? '自由演练':data.drillType===1?'角色扮演':'分组演练')}}
              </li>
            </ul>
            <div nz-row class="bottom">
              <span (click)="startDrill(data.id,data.drillSubjectType,data.drillStatus)" nz-col [nzSpan]="data.drillStatus===2 && data.courseName?6:(data.drillStatus!==2 && !data.courseName?12:8)">
                <i class="anticon anticon-login"></i>
                {{data.drillStatus!==2?"开始":"查看"}}
              </span>
              <span *ngIf="data.drillStatus===2 && roleType!='2'" nz-col [nzSpan]="data.drillStatus===2 && data.courseName?6:8" (click)="selectDrill(data.id)">
                <nz-upload [(nzFileList)]="fileList" [nzSize]="1024*3" [nzBeforeUpload]="beforeUpload" [nzLimit]="1" nzShowUploadList=false>
                  <i class="anticon anticon-upload"></i>
                  上传报告
                </nz-upload>
              </span>
              <span *ngIf="data.courseName" nz-col [nzSpan]="data.drillStatus!==2&&data.courseName?8:6">
                <a [attr.href]="httpService.IP_PORT+data.courseName" target="_blank">
                  <i class="anticon anticon-download"></i>
                  下载报告
                </a>
              </span>
              <span *ngIf="roleType!='2'" (click)="deleteDrill(data.id)" nz-col [nzSpan]="data.drillStatus===2 && data.courseName?6:(data.drillStatus!==2 && !data.courseName?12:8)">
                <i class="anticon anticon-close"></i>
                删除
              </span>
            </div>
          </nz-card>
        </div>
      </div>
      <nz-pagination style="margin-right:25px;float:right" [nzTotal]="listEntities.recordTotalCount" [(nzPageIndex)]="listEntities.currentPageIndex"
        (nzPageIndexChange)="getEntityListAsync(true)" [(nzPageSize)]="listEntities.pageSize"></nz-pagination>
    </nz-content>
  </nz-layout>
</nz-spin>
